{% extends 'base.html' %}

{% block title %}deployment详情{% endblock %}

{% block cus_style %}
    <style>
        .layui-card-header {
            font-size: 16px;
            font-weight: bold;
        }

        .layui-card-body {
            font-size: 16px;
            padding: 10px;
        }

        .layui-card-body .layui-inline {
            padding: 10px;
            font-size: 14px;
            width: 98%;
            color: #646464;
            border: 1px solid #ebeef5;
            border-radius: 4px;
        }

        #result {
            background-color: #fff;
            border: 1px solid #ebeef5;
            border-radius: 4px;
            box-shadow: 0 1px 1px 0 #c2c2c2;
            padding: 10px;
            font-size: 14px;
        }

        /* span徽章 */
        .layui-badge {
            font-size: 14px;
        }

        .svc-ing {
            margin: 10px;
            line-height: 32px;
        }

        .svc-ing table {
            width: 100%;
            text-align: center
        }

        .svc-ing table th {
            background-color: #d5dce7;
            color: #2e5085;
        }

        .svc-ing table td, tr {
            border: 1px solid #ebeef5;
            font-size: 15px;
        }

        .self-none {
            background-color: #f4f4f5;
            color: #909399;
            padding: 5px;
            font-size: 14px;
        }
        th {
            border: 1px solid #eeeeee;
        }
    </style>
{% endblock %}

{% block nav-itemed-2 %}layui-nav-itemed{% endblock %}
{% block nav-itemed-2-1 %}layui-this{% endblock %}

{% block context %}
    <span class="layui-breadcrumb" lay-separator="-">
        <a href="{% url 'index' %}">首页</a>
        <a href="">工作负载</a>
        <a href="{% url 'deployment' %}">Deployment</a>
        <a><cite>{{ dp_name }} 详情</cite></a>
    </span>
    <hr class="layui-border-green">
    <hr>
    {% csrf_token %}
    <div class="layui-row layui-col-space10">
        <div class="layui-col-md6">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">基本信息</div>
                    <div class="layui-card-body">
                        名称：{{ dp_info.name }}
                        <hr class="layui-bg-gray">
                        命名空间：{{ dp_info.namespace }}
                        <hr class="layui-bg-gray">
                        副本数量：<span class="layui-badge layui-bg-green">期望 {{ dp_info.replicas }}</span> <span
                            class="layui-badge layui-bg-gray">
                                    /
                                    </span> <span
                            class="layui-badge layui-bg-orange">可用 {{ dp_info.available_replicas }}</span>
                        <hr class="layui-bg-gray">
                        镜像：
                        {% for c in dp_info.containers %}
                            {% if dp_info.containers|length == 1 %}
                                <span>{{ c.image }}</span>
                            {% else %}
                                <span style='border: 1px solid #d6e5ec;padding: 3px'>{{ c.image }}</span>
                            {% endif %}
                        {% endfor %}
                        <hr class="layui-bg-gray">
                        标签选择器：
                        {% for k,v in dp_info.selector.items %}
                            <span style='border: 1px solid #d6e5ec;border-radius: 20px;padding: 1px 6px 1px 6px'>{{ k }}={{ v }}</span>
                        {% endfor %}
                        <hr class="layui-bg-gray">
                        创建时间：{{ dp_info.create_time }}
                        <hr class="layui-bg-gray">
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">Service</div>
                    <div class="layui-card-body">
                        <div class="svc-ing">
                            {% if dp_info.service %}
                                {% for svc in dp_info.service %}
                                    <p>
                                        类型：{{ svc.type }}<br>
                                        ClusterIP：{{ svc.cluster_ip }}&ensp;&ensp;<span
                                            class="layui-badge layui-bg-green"
                                            style="font-size: 12px">集群内部访问地址</span><br>
                                        访问端口：<br>
                                    </p>
                                    <table>
                                        <thead style="">
                                        <tr>
                                            <th>名称</th>
                                            <th>服务端口</th>
                                            <th>容器端口</th>
                                            <th>协议</th>
                                            {% if svc.type == "NodePort" %}
                                                <th>NodePort</th>
                                            {% endif %}
                                        </tr>
                                        </thead>

                                        <tbody>
                                        {% for k in svc.ports %}
                                            <tr>
                                                <td>{{ k.name }}</td>
                                                <td>{{ k.port }}</td>
                                                <td>{{ k.target_port }}</td>
                                                <td>{{ k.protocol }}</td>
                                                {% if svc.type == "NodePort" %}
                                                    <td>{{ k.node_port }}</td>
                                                {% endif %}
                                            </tr>
                                        {% endfor %}
                                        </tbody>
                                    </table>
                                {% endfor %}
                            {% else %}
                                <span class="self-none">此处显示通过 Deployment 标签筛选出的Service，但是您并未定义！</span>
                                <br><br>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">Ingress</div>
                    <div class="layui-card-body">
                        <div class="svc-ing"  style="height: 100px;overflow: auto">
                        {% for ingress in dp_info.ingress %}
                            {% if ingress.rules %}
                                {% for ing in ingress.rules %}
                                    <p>
                                        {% if ingress.tls == None %}
                                            域名：<a href="http://{{ ing.host }}" target="_blank"
                                                    style="color: #007af5">http://{{ ing.host }}</a>
                                        {% else %}
                                            域名：
                                            <a href="https://{{ ing.host }}" target="_blank"
                                               style="color: #007af5">https://{{ ing.host }}</a>
                                        {% endif %}
                                    </p>
                                    <table>
                                        <thead style="">
                                        <tr>
                                            <th>路由规则</th>
                                            <th>服务名称</th>
                                            <th>服务端口</th>
                                            <th>HTTPS</th>
                                        </tr>
                                        </thead>

                                        <tbody>
                                        <tr>
                                            {% if ing.http.path == None %}
                                                <td>/</td>
                                            {% else %}
                                                <td>{{ ing.http.path }}</td>
                                            {% endif %}

                                            {% for h in ing.http.paths %}
                                                <td>{{ h.backend.service.name }}</td>
                                                <td>{{ h.backend.service.port.number }}</td>
                                            {% endfor %}

                                            {% if ingress.tls != None %}
                                                {% for t in ingress.tls %}
                                                    <td>
                                                        {% for i in t.hosts %}
                                                            域名：{{ i }}<br>
                                                        {% endfor %}
                                                        证书：{{ t.secret_name }}
                                                    </td>
                                                {% endfor %}
                                            {% else %}
                                                <td>未启用</td>
                                            {% endif %}
                                        </tr>
                                        </tbody>
                                    </table>
                                {% endfor %}
                            {% else %}
                                <span class="self-none">此处显示是通过 Ingress 后端与上面 Service 匹配的 Ingress，但是您并未定义！</span>
                                <br><br>
                            {% endif %}
                        {% endfor %}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">更多信息</div>
                <div class="layui-card-body">
                    滚动更新：
                    <div class="layui-inline" style="width: 30%">
                        最大超出副本数：{{ dp_info.rolling_update.max_surge }}<br>
                        最大不可用副本数：{{ dp_info.rolling_update.max_unavailable }}
                    </div>

                    <hr class="layui-bg-gray">
                    数据卷：
                    {% if  dp_info.volumes|length > 0 %}
                        <div class="layui-inline" id="inline">
                            <div class="layui-row layui-col-space15">
                                {% for vol in dp_info.volumes %}
                                    <div class="layui-col-md4">
                                        <div class="grid-demo grid-demo-bg1">

                                            {% for k,v in vol.items %}

                                                <div id="result">
                                                    卷名称：{{ v.name }}<br>
                                                    卷类型：{{ k }}<br>
                                                </div>
                                            {% endfor %}
                                        </div>
                                    </div>
                                {% endfor %}

                            </div>
                        </div>
                    {% else %}
                        <span class="self-none">None</span>
                    {% endif %}

                    <hr class="layui-bg-gray">
                    污点容忍：
                    {% if  dp_info.tolerations|length > 0 %}
                        <div class="layui-inline">
                            <div class="layui-row layui-col-space15">
                                {% for t in dp_info.tolerations %}
                                    <div class="layui-col-md4">
                                        <div class="grid-demo grid-demo-bg1">
                                            <div class="layui-card">
                                                <div class="layui-card-body" style="font-size: 14px">
                                                    key：{{ t.key }}<br>
                                                    operator：{{ t.operator }}<br>
                                                    effect：{{ t.effect }}<br>
                                                    容忍时间：{{ t.toleration_seconds }}<br>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                {% endfor %}
                            </div>
                        </div>
                    {% else %}
                        <span class="self-none">None</span>
                    {% endif %}

                    <hr class="layui-bg-gray">
                    容器配置：
                    <div class="layui-inline">
                        <div class="layui-row layui-col-space15" style="height: 487px;overflow: auto">
                            {% for c in dp_info.containers %}
                                <div class="layui-col-md6">
                                    <div class="grid-demo grid-demo-bg1">
                                        <div class="layui-card">
                                            <div class="layui-card-body">

                                                <span style="color: #fff;border-radius: 4px;background-color: #2e5085;padding: 2px;">容器{{ forloop.counter }}：{{ c.name }}</span><br><br>

                                                {% if c.env != None %}
                                                    <div id="result">
                                                        <span class="layui-badge layui-bg-green">变量</span>
                                                        <hr>
                                                        {% for v in c.env %}

                                                            {% if v.value != None %}
                                                                来源：自定义<br>
                                                                名称：{{ v.name }}<br>
                                                                值：{{ v.value }}
                                                            {% elif v.value_from != None %}
                                                                {% if v.value_from.config_map_key_ref != None %}
                                                                    来源：configmap /
                                                                    {{ v.value_from.config_map_key_ref.name }} /
                                                                    {{ v.value_from.config_map_key_ref.key }}<br>
                                                                    名称：{{ v.name }}
                                                                {% elif v.value_from.secret_key_ref != None %}
                                                                    来源：secret / {{ v.value_from.secret_key_ref.name }}
                                                                    / {{ v.value_from.secret_key_ref.key }}<br>
                                                                    名称：{{ v.name }}
                                                                {% elif v.value_from.field_ref != None %}
                                                                    来源：Pod属性 /
                                                                    {{ v.value_from.field_ref.field_path }}<br>
                                                                    名称：{{ v.name }}
                                                                {% endif %}
                                                            {% endif %}
                                                            {% if forloop.counter != c.env|length %}
                                                                <hr>
                                                            {% endif %}
                                                        {% endfor %}

                                                    </div>
                                                {% else %}
                                                    <div id="result">
                                                        <span class="layui-badge layui-bg-green">变量</span>
                                                        <hr>
                                                        <span class="self-none">None</span>
                                                    </div>
                                                {% endif %}
                                                <br>

                                                {% if c.ports != None %}
                                                    <div id="result">
                                                        <span class="layui-badge layui-bg-green">端口</span>
                                                        <hr>
                                                        {% for p in c.ports %}
                                                            名称：{{ p.name }}<br>
                                                            容器端口：{{ p.container_port }}<br>
                                                            协议：{{ p.protocol }}
                                                        {% endfor %}
                                                    </div>
                                                {% else %}
                                                    <div id="result">
                                                        <span class="layui-badge layui-bg-green">端口</span>
                                                        <hr>
                                                        <span class="self-none">None</span>
                                                    </div>
                                                {% endif %}

                                                <br>

                                                {% if c.resources.requests == None and c.resources.limits == None %}
                                                    <div id="result">
                                                        <span class="layui-badge layui-bg-green">资源分配</span>
                                                        <hr>
                                                        <span class="self-none">None</span>
                                                    </div>
                                                {% else %}
                                                    <div id="result">
                                                        <span class="layui-badge layui-bg-green">资源分配</span>
                                                        <hr>
                                                        {% if c.resources.requests != None %}
                                                            <span class="layui-badge layui-bg-orange">请求</span><br>
                                                            {% if c.resources.requests.cpu != None %}
                                                                CPU：{{ c.resources.requests.cpu }}<br>
                                                            {% else %}
                                                                CPU: <span class="layui-badge layui-bg-gray">None</span>
                                                            {% endif %}
                                                            {% if c.resources.requests.memory != None %}
                                                                内存：{{ c.resources.requests.memory }}<br>
                                                            {% else %}
                                                                内存:
                                                                <span class="layui-badge layui-bg-gray">None</span>
                                                            {% endif %}
                                                        {% else %}
                                                            <span class="layui-badge layui-bg-orange">请求</span>&ensp;
                                                            <span class="self-none">None</span>
                                                        {% endif %}

                                                        <hr>

                                                        {% if c.resources.limits != None %}
                                                            <span class="layui-badge layui-bg-orange">限制</span><br>
                                                            {% if c.resources.limits.cpu != None %}
                                                                CPU：{{ c.resources.limits.cpu }}<br>
                                                            {% else %}
                                                                CPU: <span class="layui-badge layui-bg-gray">None</span>
                                                            {% endif %}
                                                            {% if c.resources.limits.memory != None %}
                                                                内存：{{ c.resources.limits.memory }}<br>
                                                            {% else %}
                                                                内存:
                                                                <span class="layui-badge layui-bg-gray">None</span>
                                                            {% endif %}
                                                        {% else %}
                                                            <span class="layui-badge layui-bg-orange">限制</span>&ensp;
                                                            <span class="self-none">None</span>
                                                        {% endif %}
                                                    </div>
                                                {% endif %}

                                                <br>

                                                {% if c.readiness_probe == None and c.liveness_probe == None %}
                                                    <div id="result">
                                                        <span class="layui-badge layui-bg-green">健康检查</span>
                                                        <hr>
                                                        <span class="self-none">None</span>
                                                    </div>
                                                {% else %}
                                                    <div id="result">
                                                        <span class="layui-badge layui-bg-green">健康检查</span>
                                                        <hr>
                                                        {% if c.readiness_probe != None %}
                                                            <span class="layui-badge layui-bg-orange">就绪检查</span>
                                                            <br>
                                                            {% if c.readiness_probe.tcp_socket != None %}
                                                                类型：tcp_socket<br>
                                                                端口：{{ c.readiness_probe.tcp_socket.port }}<br>
                                                                初始延迟检查时间(s)：
                                                                {{ c.readiness_probe.initial_delay_seconds }}<br>
                                                                周期间隔(s)：{{ c.readiness_probe.period_seconds }}
                                                            {% elif c.readiness_probe.http_get  != None %}
                                                                类型：http_get<br>
                                                                URL：{{ c.readiness_probe.http_get.path }}<br>
                                                                端口：{{ c.readiness_probe.http_get.port }}<br>
                                                                协议：{{ c.readiness_probe.http_get.scheme }}<br>
                                                                初始延迟检查时间(s)：
                                                                {{ c.readiness_probe.initial_delay_seconds }}<br>
                                                                周期间隔(s)：{{ c.readiness_probe.period_seconds }}
                                                                {#                                    {% elif c.readiness_probe._exec  != None %}#}
                                                                {#                                        {{ c.readiness_probe._exec }}#}
                                                            {% endif %}
                                                        {% else %}
                                                            <span class="layui-badge layui-bg-orange">就绪检查</span>
                                                            &ensp;
                                                            <span class="self-none">None</span>
                                                        {% endif %}

                                                        <hr>

                                                        {% if c.liveness_probe != None %}
                                                            <span class="layui-badge layui-bg-orange">存活检查</span>
                                                            <br>
                                                            {% if c.liveness_probe.tcp_socket != None %}
                                                                类型：tcp_socket<br>
                                                                端口：{{ c.liveness_probe.tcp_socket.port }}<br>
                                                                初始延迟检查时间(s)：
                                                                {{ c.readiness_probe.initial_delay_seconds }}<br>
                                                                周期间隔(s)：{{ c.readiness_probe.period_seconds }}
                                                            {% elif c.liveness_probe.http_get  != None %}
                                                                类型：http_get<br>
                                                                URL：{{ c.liveness_probe.http_get.path }}<br>
                                                                端口：{{ c.liveness_probe.http_get.port }}<br>
                                                                协议：{{ c.liveness_probe.http_get.scheme }}<br>
                                                                初始延迟检查时间(s)：
                                                                {{ c.liveness_probe.initial_delay_seconds }}<br>
                                                                周期间隔(s)：{{ c.liveness_probe.period_seconds }}
                                                                {#                                    {% elif c.readiness_probe._exec  != None %}#}
                                                                {#                                        {{ c.readiness_probe._exec }}#}
                                                            {% endif %}
                                                        {% else %}
                                                            <span class="layui-badge layui-bg-orange">存活检查</span>
                                                            &ensp;
                                                            <span class="self-none">None</span>
                                                        {% endif %}
                                                    </div>
                                                {% endif %}

                                                <br>

                                                {% if  c.volume_mounts != None %}
                                                    <div id="result">
                                                        <span class="layui-badge layui-bg-green">数据卷</span>
                                                        <hr>
                                                        {% for vol in c.volume_mounts %}
                                                            名称：{{ vol.name }}<br>
                                                            挂载点：{{ vol.mount_path }}<br>
                                                            子路径：{{ vol.sub_path }}<br>
                                                            只读：{{ vol.read_only }}

                                                            {#                                  {% for k,v in vol.items %}#}
                                                            {#                                  数据卷：{{ k }}{{ v }}#}
                                                            {#                                  {% endfor %}#}
                                                        {% endfor %}
                                                    </div>
                                                {% else %}
                                                    <div id="result">
                                                        <span class="layui-badge layui-bg-green">数据卷</span>
                                                        <hr>
                                                        <span class="self-none">None</span>
                                                    </div>
                                                {% endif %}

                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">历史发布版本（ReplicaSet副本集）&ensp;&ensp;<span
                        class="layui-badge layui-bg-green"
                        style="font-size: 12px">  最大历史版本数量：{{ dp_info.rs_number }}</span></div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="test" lay-filter="test"></table>
                    <script type="text/html" id="barDemo">
                        <a class="layui-btn layui-btn-xs" lay-event="yaml">YAML</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="rollback">回滚</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
    <hr>
{% endblock %}

{% block custom_js %}
    <script>
        layui.use('table', function () {
            var table = layui.table;
            var $ = layui.jquery;

            table.render({
                elem: '#test'
                , url: '{% url "replicaset_api" %}'
                , page: false  // 关闭分页
                , cols: [[
                    {field: 'name', title: '名称', sort: true}
                    {#,{field: 'namespace', title: '命名空间', sort: true}#}
                    , {field: 'replicas', title: '期望副本', sort: true}
                    , {field: 'ready_replicas', title: '就绪副本'}
                    , {field: 'available_replicas', title: '可用副本', sort: true}
                    , {field: 'create_time', title: '创建时间'}
                    , {field: 'revision', title: '版本号', sort: true}
                    , {field: 'containers', title: '镜像版本差异', templet: containersFormat}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
                ]]
                , where: {
                    namespace: "{{ namespace }}",
                    dp_name: "{{ dp_name }}"
                }
            });

            function containersFormat(d) {
                result = "";
                for (let key in d.containers) {
                    result += key + '=' + d.containers[key] + '<br>'
                }
                return result
            }

            //监听行工具事件
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                if (obj.event === 'rollback') {
                    layer.confirm('真的要回滚到 ' + data["name"] + "/" + data["revision"] + ' 这个版本吗？', function (index) {
                        /*关闭功能*/
                        layer.msg("功能完善中...暂不支持回滚");
                        return;
                        var csrf_token = $('[name="csrfmiddlewaretoken"]').val();
                        data['csrfmiddlewaretoken'] = csrf_token;
                        data['dp_name'] = '{{ dp_name }}';
                        $.ajax({
                            url: '{% url "replicaset_api" %}',
                            type: "POST",
                            data: data,
                            success: function (res) {
                                if (res.code === 0) {
                                    layer.msg(res.msg, {icon: 6});
                                } else {
                                    layer.msg(res.msg, {icon: 5})
                                }
                            }
                        });
                    })
                } else if (obj.event === 'yaml') {
                    layer.open({
                        title: "YAML",
                        type: 2,  // 加载层，从另一个网址引用
                        area: ['40%', '80%'],
                        content: '{% url "editor" %}?res_type=replicaset&' + 'namespace=' + data["namespace"] + "&name=" + data["name"],
                    });
                }
            });

        });
    </script>
{% endblock %}